<!--
 * @Author: CemCode cemoment@aliyun.com
 * @Date: 2022-04-13 16:57:25
 * @LastEditors: CemCode cemoment@aliyun.com
 * @LastEditTime: 2022-11-18 03:14:14
 * @FilePath: \vue-blog-2\src\views\desk\home\Pigeonhole.vue
 * @Description: 文章归档页
 * Copyright (c) 2022 by CemCode cemoment@aliyun.com, All Rights Reserved. 
-->
<template>
  <div class="pigeonhole_main">
    <div class="middle_con">
      <div class="article_list_con" v-for="item in articles" :key="item[0]">
        <template v-if="item[0][0] != '咕'">
          <p class="article_timeset_title" :id="item[0]">{{ item[0] }}</p>
          <div class="articles">
            <div class="article_con" v-for="(article) in item[1]" :key="article.id"
              @click="handleReadArticle(article.id)">
              <div class="article_title">
                <span class="color_box"></span><span class="title" :title="article.article_title">{{
                    article.article_title
                }}</span>
              </div>
              <div class="article_info">
                <span>发表于：{{ article.create_time | formatTime }} | <span v-if="!article.label" class="label">{{
                    article.type
                }}</span><span v-else class="label">{{ article.label }}</span></span>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <small>一不小心{{item[1]}}</small>
        </template>
      </div>
    </div>
    <div class="right_nav_con">
      <div class="nav_title_con">
        <div class="iconfont">&#xe649;</div>
        <span>导航</span>
      </div>
      <ul class="nav_link">
        <li v-for="(item) in articles" :key="item[0] + 'empt'">
          <a v-if="item[0][0] != '咕'" :href="`#${item[0]}`">{{ item[0] }}</a>
          <a v-else href="#" class="gugu_date">{{ item[1] }}</a>
        </li>
      </ul>

    </div>
  </div>
</template>
<script>
import { $articleInfo } from '@/api/desk'
import { formatTime } from '@/utils/tools'
export default {
  name: "desk-pigeonhole",
  data() {
    return {
      articles: {}
    }
  },
  filters: {
    formatTime(time) {
      return formatTime(time)
    }
  },
  created() {
    this.articleInfo()
  },
  methods: {
    articleInfo() {
      $articleInfo().then(res => {
        const articles = Object.keys(res.data).map(item => item.match(/(\d+)/g));
        // 筛查一下有没有咕咕咕的情况
        //1. 咕咕以1个月（绿色）为单位，向后就是1年（紫色）
        // let date = articles[0]

        let year = articles[articles.length - 1][0];
        let month = articles[articles.length - 1][1];
        const newObj = []
        let count = 0;
        for (let i = articles.length - 2; i >= 0; i--) {
          let y = articles[i][0];
          let m = articles[i][1];
          if (y - year >= 1) {
            // 咕咕时间可能跨年了
            if (m != 1 && month != 12) {
              // 确认超时至少1个月
              let temp = 12 - month + m - 1;
              let str = "";
              if (temp >= 12) {
                str = `咕了${temp / 12}年${temp % 12}个月`;
              } else {
                str = `咕了${temp}个月`;
              }
              newObj.push(["咕" + count++, str]);
            }
          } else {
            if (m - month > 1) {
              // 咕了
              let temp = m - month - 1;
              newObj.push(["咕" + count++, `咕了${temp}个月`]);

            }
          }
          let key = `${y}年${m}月`;
          newObj.push([key, res.data[key]]);
          year = y;
          month = m;
        }
        console.log("date", newObj);
        this.articles = newObj.reverse();
      })
    },

    // 跳转到文章详细内容页
    handleReadArticle(id) {
      this.$router.push({
        path: "/home/article_info",
        query: {
          id: id
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
@media screen and (max-width:600px) {
  .right_nav_con {
    display: none !important;
  }

  .article_con {
    min-width: 100% !important;
  }

  .middle_con::-webkit-scrollbar {
    display: none !important;
  }
}

.pigeonhole_main {
  width: 100%;
  height: 100%;
  display: flex;

  .middle_con {
    &::-webkit-scrollbar-thumb {
      background-color: #999;
      border-radius: 4px;
    }

    &::-webkit-scrollbar {
      width: 4px;
    }
  }

  .middle_con {
    flex: 1 auto;
    margin: 0 25px;
    padding: 10px;
    background-color: rgba(238, 238, 238, 0.315);
    letter-spacing: 2px;
    overflow-y: scroll;
    color: #333;
    box-sizing: border-box;

    // 文章内容块
    .article_list_con {
      padding: 10px;
      box-sizing: border-box;

      .article_timeset_title {
        font-size: 17px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .articles {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .article_con:hover {
          transform: scale(1.03);
        }

        .article_con {
          margin-bottom: 10px;
          min-width: 48%;
          max-width: 48%;
          transition: 0.3s;
          cursor: pointer;
          padding: 10px;
          box-sizing: border-box;
          border-radius: 4px;
          height: 70px;
          display: flex;
          flex-direction: column;
          background-color: white;
          box-shadow: 0 0 5px 0px #bbb;

          &:hover {
            transform: scale(1.05);
          }

          .article_title {
            height: 70px;
            overflow: hidden;
            font-size: 13px;

            .title {
              display: inline-block;

              &::before {
                content: "";
                width: 10px;
                height: 30px;
                display: inline-block;
                vertical-align: middle;
                margin-right: 10px;
                background-color: #7ed4ff;
              }
            }
          }

          .article_info {
            height: 50px;
            font-size: 12px;
            display: flex;
            color: #555;
            align-items: flex-end;

            .label {
              border-radius: 3px;
              background-color: #999;
              color: white;
              padding: 1px 5px;
            }
          }
        }
      }
    }
  }

  .right_nav_con {
    width: 250px;
    padding: 10px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;

    .nav_title_con {
      width: 100px;
      height: 100px;
      line-height: 90px;
      box-sizing: border-box;
      text-align: center;

      .iconfont {
        font-size: 100px;
        color: rgb(255, 246, 125);
        position: absolute;
        z-index: 1;
        cursor: pointer;
        transition: 2s;
        filter: drop-shadow(0 0 10px rgb(253, 255, 129));

        &:hover {
          transform: rotate(360deg);
        }
      }

      >span {
        z-index: 1;
        position: relative;
        color: rgb(0, 0, 0);
        font-weight: bold;
        padding-left: 5px;
        font-family: 黑体;
        letter-spacing: 5px;
      }
    }

    .nav_link {
      list-style: none;

      li {
        margin-top: 10px;
        transition: 0.3s;

        &:hover {
          transform: scale(1.1);
        }

        &:nth-child(2n) {
          a {
            background-color: #eef;
          }
        }

        a {
          text-decoration: none;
          color: #333;
          cursor: pointer;
          display: inline-block;
          width: 100px;
          text-align: center;
          background-color: white;
          border-radius: 3px;
          padding: 5px 10px;
        }

        .gugu_date {
          background-color: rgb(217, 238, 185) !important;
        }
      }
    }

  }
}
</style>